<style include="settings-shared">
  /* Use relative position with no offset so that display divs (children),
     which have absolute positions, are offset from the displayArea div. */
  #displayArea {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  /* Note: the size of the border / box shadow affects the style generated
     in getDivStyle_ and getMirrorDivStyle_ */
  .display {
    align-items: center;
    background: var(--cros-textfield-background-color);
    color: var(--cros-text-color-secondary);
    cursor: default;
    display: flex;
    font-size: 100%;
    font-weight: 500;
    justify-content: center;
    margin: 4px;
    padding: 3px;
    position: absolute;
    text-align: center;
  }
  .display[selected] {
    border: var(--cros-icon-color-prominent) solid 1px;
  }
  .display.mirror {
    border: var(--cros-icon-color-prominent) solid 1px;
  }
  .highlight-left {
    border-left: var(--cros-icon-color-prominent) solid 1px;
  }
  .highlight-right {
    border-right: var(--cros-icon-color-prominent) solid 1px;
  }
  .highlight-top {
    border-top: var(--cros-icon-color-prominent) solid 1px;
  }
  .highlight-bottom {
    border-bottom: var(--cros-icon-color-prominent) solid 1px;
  }

  .display.elevate {
    box-shadow: var(--cr-elevation-3);
  }
</style>
<div id="displayArea" on-iron-resize="calculateVisualScale_">
  <template is="dom-repeat" items="[[mirroringDestinationIds_]]">
    <div id="_mirror_[[item]]" class="display mirror"
        hidden$="[[!mirroring]]"
        style$="[[getMirrorDivStyle_(index, mirroringDestinationIds_.length,
                                     displays, visualScale)]]">
    </div>
  </template>
  <template is="dom-repeat" items="[[displays]]">
    <div id="_[[item.id]]" class="display elevate"
        draggable="[[dragEnabled]]" on-focus="onFocus_"
        on-click="onSelectDisplayTap_"
        style$="[[getDivStyle_(item.id, item.bounds, visualScale)]]"
        selected$="[[isSelected_(item, selectedDisplay)]]"
        tabindex="0">
    </div>
  </template>
</div>
